import React, { useState } from 'react';
import { 
  Form, 
  Input, 
  Button, 
  Card, 
  Typography, 
  message,
  Checkbox,
  Space,
  Row,
  Col,
} from 'antd';
import { 
  UserOutlined, 
  LockOutlined,
  SettingOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { usePlatformStore } from '@/stores/platform';
import { PlatformLoginRequest } from '@/types';
import './index.css';

const { Title, Text } = Typography;

const PlatformLoginPage: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const { login } = usePlatformStore();

  const handleSubmit = async (values: PlatformLoginRequest) => {
    setLoading(true);
    try {
      await login(values);
      message.success('登录成功！');
    } catch (error: any) {
      message.error(error.message || '登录失败，请检查用户名和密码');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-container">
      {/* 背景装饰 */}
      <div className="login-background">
        <div className="bg-shape bg-shape-1"></div>
        <div className="bg-shape bg-shape-2"></div>
        <div className="bg-shape bg-shape-3"></div>
      </div>
      
      <Row justify="center" align="middle" style={{ minHeight: '100vh', padding: 24, position: 'relative', zIndex: 2 }}>
        <Col xs={24} sm={20} md={16} lg={12} xl={8} xxl={6}>
          <div className="login-content">
            {/* 登录卡片 */}
            <Card className="login-card">
              {/* Logo区域 */}
              <div className="login-brand">
                <div className="brand-text">
                  <Title level={1} className="brand-title">
                     Cloud Platform
                  </Title>
                </div>
              </div>

              {/* 登录表单 */}
              <Form
                form={form}
                name="platform-login"
                onFinish={handleSubmit}
                layout="vertical"
                requiredMark={false}
                className="login-form"
                autoComplete="on"
              >
                <Form.Item
                  name="username"
                  label="平台用户名"
                  rules={[{ required: true, message: '请输入平台用户名' }]}
                >
                  <Input
                    id="platform-username"
                    name="username"
                    autoComplete="username"
                    prefix={<UserOutlined className="input-prefix-icon" />}
                    placeholder="请输入平台用户名"
                    className="login-input"
                  />
                </Form.Item>

                <Form.Item
                  name="password"
                  label="平台密码"
                  rules={[{ required: true, message: '请输入平台密码' }]}
                >
                  <Input.Password
                    id="platform-password"
                    name="password"
                    autoComplete="current-password"
                    prefix={<LockOutlined className="input-prefix-icon" />}
                    placeholder="请输入平台密码"
                    className="login-input"
                  />
                </Form.Item>

                <Form.Item>
                  <Row justify="space-between" align="middle">
                    <Col>
                      <Form.Item name="rememberMe" valuePropName="checked" noStyle>
                        <Checkbox className="remember-checkbox">记住登录状态</Checkbox>
                      </Form.Item>
                    </Col>
                    <Col>
                      <Button type="link" className="forgot-password-link">
                        忘记密码？
                      </Button>
                    </Col>
                  </Row>
                </Form.Item>

                <Form.Item style={{ marginBottom: 16 }}>
                  <Button
                    type="primary"
                    htmlType="submit"
                    loading={loading}
                    block
                    className="login-button platform-login-button"
                  >
                    {loading ? '登录中...' : '登录平台管理系统'}
                  </Button>
                </Form.Item>
              </Form>

              {/*<Divider style={{ margin: '24px 0' }}>*/}
              {/*  <Text type="secondary" style={{ fontSize: 12 }}>其他登录方式</Text>*/}
              {/*</Divider>*/}

              <div className="login-footer">
                <Space direction="vertical" size="small" style={{ width: '100%', textAlign: 'center' }}>
                  <Text className="footer-text">
                    © 2025 CatCloud. 保留所有权利
                  </Text>
                </Space>
              </div>
            </Card>
          </div>
        </Col>
      </Row>
    </div>
  );
};

export default PlatformLoginPage;